<!-- 智能空间主页面 -->
<template>
  <div
    class="box"
    name="viewport"
    content="width=device-width, initial-scale=1.0"
    :data="pageData.areaList"
  >
    <span style="position: absolute; top: -50px; left: 20px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/spaceconfig' }"
          >智能空间</el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="type == 1">空间详情</el-breadcrumb-item>
      </el-breadcrumb>
    </span>
    <el-form
      class="main-box"
      :model="pageData"
      ref="pageData"
      :rules="pageData.rules"
      v-if="type == 0"
    >
      <!-- 可编辑状态 -->
      <div
        class="box-item"
        v-for="(item, index) in pageData.areaList"
        :key="item.area_id"
        @click="sss(item)"
      >
        <div class="item-top">
          <div v-show="editstate && index > 0">
            空间名称：&nbsp;<el-input
              type="text"
              style="font-size: 17px"
              v-model="item.name"
              size="mini"
            />
          </div>
          <p v-show="!editstate || index == 0">
            空间名称：&nbsp;<span
              style="font-weight: 800; font-size: 17px; color: black"
              >{{ item.name }}</span
            >
          </p>
          <!-- <div v-show="editstate && index > 0">
            空间名称：<el-input type="text" v-model="item.name" size="mini" />
          </div> -->
          <!-- <p class="room">Room{{ index + 1 }}</p> -->
        </div>
        <div class="item-center">
          <span v-show="!editstate || index == 0"
            >设备别名：&nbsp;{{ item.address }}</span
          >
          <span v-show="editstate && index > 0"
            >设备别名：&nbsp;<el-input
              type="text"
              v-model="item.address"
              size="mini"
          /></span>
        </div>

        <div class="item-bottom">
          <!-- <span>Room 00{{ index + 1 }}</span> -->
          <span v-if="index + 1 < 10">Room 00{{ index + 1 }}</span>
          <span v-if="index + 1 > 9 && index + 1 < 99"
            >Room 0{{ index + 1 }}</span
          >
          <span v-if="index + 1 > 99">Room {{ index + 1 }}</span>
          &nbsp; &nbsp; &nbsp;

          <span>在线 &nbsp;{{ online_count }} </span>
          <span
            >离线 &nbsp;<span style="color: red">{{ offline_count }}</span>
          </span>
        </div>

        <!-- 删除 -->
        <div
          class="del"
          v-show="editstate && index > 0"
          @click="del(item.area_id, index)"
        >
          ×
        </div>
      </div>
      <div class="box-item add" @click="addDevice" v-show="editstate">
        <img src="../../assets/添加设备@3x.png" />
      </div>
      <div class="edit-button">
        <el-button v-if="buttonShow" type="primary" class="edit" @click="edit()"
          >编辑空间</el-button
        >
        <el-button
          v-if="!buttonShow"
          type="primary"
          class="edit"
          @click="submitForm('pageData')"
        >
          保存编辑
        </el-button>
      </div>
    </el-form>

    <SpaceDetail
      v-if="type == 1"
      @back="type = 0"
      :propName="propName"
      :space="space"
    ></SpaceDetail>
    <!-- 添加设备 -->
    <el-dialog
      :visible.sync="dialog1.visible"
      width="600px"
      :modal="false"
      @close="resetForm"
    >
      <p>添加空间</p>
      <el-form
        :model="dialog1.form"
        label-width="100px"
        ref="form"
        :hide-required-asterisk="true"
        class="dialogform"
        id="form"
      >
        <el-form-item label="设备名" prop="label">
          <el-input v-model="dialog1.form.name" name="name"></el-input>
        </el-form-item>
        <el-form-item label="别名" prop="label">
          <el-input v-model="dialog1.form.number" name="number"></el-input>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button type="info" @click="hideDialog('dialog1', 'visible')"
          >关闭</el-button
        >
        <el-button type="primary" @click="addDevice">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import Api from "../../api/api";
import SpaceDetail from "@/components/SpaceDetail.vue";

export default {
  components: {
    SpaceDetail,
  },

  data() {
    return {
      count: null,
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      pageData: {
        areaList: [],
        rules: {
          name: [
            { required: true, message: "名字不能为空", trigger: "blur" },
            {
              min: 1,
              max: 10,
              message: "名字长度在 1 到 10 个字符之间",
              trigger: "blur",
            },
          ],
        },
      },
      editstate: false,
      propName: this.propName,
      space: this.space,
      buttonShow: true,
      online_count: "",
      offline_count: "",
      type: 0,
      list: [],
      dialog1: {
        visible: false,
        form: {
          name: "",
          // no: '',
          // leavenum: '',
          number: "",
        },
      },
    };
  },
  computed: {
    ...mapGetters(["sid"]),
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  async created() {
    let res = await Api.get_device_online_count({
      params: { sid: this.localSid },
    });
    // 总设备数
    // this.total_count = res.result.total_count;
    // 设备在线数
    this.online_count = res.result.online_count;
    // 设备离线数
    this.offline_count = res.result.offline_count;

    let ref = await Api.query_areas({
      params: {
        sid: this.localSid,
      },
    });
    this.setAreasData(ref);
    this.pageData.areaList = ref.result.areas;
    this.pageData.areaList.name = ref.result.areas.name;

    this.propName = this.pageData.areaList = ref.result.areas;

    let ref1 = await Api.get_device_online_count_by_area_id({
      params: { sid: this.localSid, area_id: 144 },
    });
    //   this.ess = ref1.result.device_ep_list;
    //   this.online = this.ess.filter((item) => item.online === 0);
    //   console.log("离线数>", this.online.length);
    // console.log("卡片的在线离线>", this.propName[i].area_id);
    console.log("卡片的在线离线>", ref1.result.offline_count);

    console.log("this.propName>>", this.pageData.areaList);
    for (let i = 0; i < this.pageData.areaList.length; i++) {
      this.liuyi = this.pageData.areaList[i].area_id;
      // console.log("每个空间的id", this.liuyi);
    }

    let res1 = await Api.get_device_online_count_by_area_id({
      params: { sid: this.localSid, area_id: 0 },
    });
    console.log("res1>>", res1);
  },
  methods: {
    ...mapMutations(["setAreasData"]),
    submitForm(ruleForm) {
      this.editstate = !this.editstate;
      this.buttonShow = !this.buttonShow;
      this.$refs[ruleForm].validate(async (valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在保存...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          let res = await Api.update_areas({
            params: {
              sid: this.localSid,
              areas: this.pageData.areaList,
            },
          });
          this.pageData.areaList = res.result.areas;
          loading.close();
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        } else {
          return false;
        }
      });
    },

    async add() {
      this.dialog1.visible = true;
    },
    // 编辑空间
    edit() {
      this.editstate = !this.editstate;
      this.buttonShow = !this.buttonShow;
    },
    sss(row) {
      this.space = row;
      console.log("点击卡片的带参", this.space);
      this.editstate == true ? null : (this.type = 1);
    },
    // ×号键方法
    del(area_id, index) {
      this.$confirm("删除后之前引用此空间的地方将会全部清除,是否继续?", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "放弃",
      })
        .then(() => {
          this.$message({
            showClose: true,
            type: "success",
            message: "删除成功",
          });
          this.pageData.areaList.splice(index, 1);
          Api.delete_area({
            params: { sid: this.localSid, area_id },
          });
        })
        .catch(() => {});
    },
    // 添加卡片
    async addDevice() {
      let res = await Api.add_area({
        params: {
          sid: this.localSid,
          name: "空间" + (this.pageData.areaList.length + 1),
          address: "",
          icon: 0,
        },
      });
      this.pageData.areaList.push(res.result.areas[0]);
      this.$message({
        showClose: true,
        type: "success",
        message: "添加成功",
      });
    },
    hideDialog(dialog, visible) {
      this.resetForm();
      this[dialog][visible] = false;
    },
    resetForm() {
      this.$refs["form"].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100vh - 80px);
  position: relative;
  .main-box {
    width: 100%;
    height: 90%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .box-item {
    width: 19%;
    height: 140px;
    margin: 20px 0 0 3.3%;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 20px 1%;
    position: relative;
    .item-top {
      width: 100%;
      height: 30px;
      color: #686c77;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .item-center {
      width: 100%;
      height: 40px;
      color: #686c77;
      text-align: left;
      position: relative;
      line-height: 40px;
    }

    .item-bottom {
      display: flex;
      justify-content: space-between;
      color: #686c77;
      font-size: 14px;
      width: 100%;
      height: 30px;
      margin-top: 20px;
      text-align: right;
    }

    .del {
      position: absolute;
      right: -5px;
      top: -5px;
      text-align: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid #c9c5c5;
      line-height: 16px;
      width: 16px;
      height: 16px;
      background-color: #fff;
    }
  }
  .add {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f5f7;

    img {
      width: 40px;
      height: 40px;
    }
  }
  ::v-deep.el-input {
    width: 140px;
  }
  .edit-button {
    width: 100%;
    height: 10%;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fff;
    .edit {
      position: fixed;
      right: 60px;
      bottom: 2%;
    }
  }

  .footer {
    margin-top: 20px;
  }
}
</style>
